#{extends 'main_adm.html' /}
#{set title:'Relatório de Produtos' /}

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../../../public/stylesheets/layout_relatorio.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../../public/stylesheets/layout_listagem.css">
</head>

<body>  
 
<div id="geral" align="center">

    <div id="lista_relatorio" style="float:right" >
    
                <table  id="tab" align="center">
                    <thead>
                        <tr>
                            <th width="50">Código</th>
                            <th width="200">Nome</th>
                            <th width="129">Categoria</th>
                            <th width="122">Valor</th>
                            <th width="120">Data de Cadastro</th>
                            <th width="102">Pedidos</th>
                            <th width="72">Visualizações</th>
                        </tr>
                    </thead>
                    <tbody>
                        
 					#{list contador, as:'contador'}                       
                        <tr>
                            <td>${codigos[contador]}</td>
                            <td>${nomes[contador]}</td>
                            <td>${categorias[contador]}</td>
                            <td>R$ ${valores[contador]}</td>
                            <td>${datas[contador]}</td>
                            <td>${quantPedidos[contador]}</td>
                            <td>${visualizacoes[contador]}</td>
                        </tr>
    				#{/list}
    
                    </tbody>
                    <tfoot>
                    </tfoot>
    
                </table>
                
    </div>
#{form @teste()}       
    <div id="consulta" style="float:left">
    	#{field 'consulta'}
            <h3>Consultar por...</h3>
            <br />
            <p>Opção:</p>
            <select id="escolha">
            <option value=""></option>
            <option value="${consulta}">Valor</option>
            <option value="${consulta}">N° Pedidos</option>
            <option value="${consulta}">N° Visualizações</option>      
            </select>
         #{/field}
         #{field 'categoria'}
            <p>Categoria:</p>
            <select id="escolha">
            <option value=""></option>
            <option value="Colar">Colar</option>
            <option value="Pulseira">Pulseira</option>
            </select>
         #{/field}            
         #{field 'ordem'}
            <p>Ordem:</p>
            <select id="escolha">
            <option value=""></option>
            <option value="Crescente">Crescente</option>
            <option value="Decrescente">Decrescente</option>
            </select>
         #{/field}
            <br />
            <br />
            <p>Data de Cadastro</p>
            <br />
            <p>De:</p><input id="escolha" type="date" />
            <p>Até:</p><input id="escolha" type="date" />
            <br />
            <br />
            <br />
            <input type="image" id="botaoConsultar" src="../../../public/images/botaofiltro.png"/>
            
    </div>
    #{/form}
</div>
	<div id="clear" style="clear:both">
    </div>
  
</body>
</html>